<template>
  <PhonePreview>
    <div class="preview-list">
      <div class="preview-item">
        <div class="user-title">
          <img src="/static/user.png" alt="" />
          <span>{{props.user}}</span>
        </div>
        <div class="content" v-html="content"></div>
        <div class="materials" v-if="materials.length">
          <component :is="getCom(materials)" :materialsInfo="materials" />
        </div>
      </div>
    </div>
  </PhonePreview>
</template>

<script setup lang='ts'>
import {reactive, ref, computed, watch, onMounted, onUnmounted, shallowRef, watchEffect} from "vue"
import {useRouter, useRoute} from "vue-router"
import PhonePreview from '../index.vue'
import PhonePicture from "./components/PhonePicture.vue";
import PhoneVideo from "./components/PhoneVideo.vue";
import PhoneAudio from "./components/PhoneAudio.vue";
import PhoneLink from "./components/PhoneLink.vue";
import PhoneAward from "./components/PhoneAward.vue";
import PhoneCollection from "./components/PhoneCollection.vue";
import PhoneGoods from "./components/PhoneGoods.vue";
import PhonePage from "./components/PhonePage.vue";
import PhoneMiniPrograme from "./components/PhoneMiniPrograme.vue";

import bus from '@/utils/bus'

let content = ref<string>('')
let materials = ref<any[]>([])
let materialsData = ref<any[]>([])

interface TabsType{
  icon: string
  [propsName: string]: string|number
  comName: InstanceType<typeof PhonePicture>
}

interface ConfigType{
  tabs: Array<TabsType>
}

interface Props{
  reKey: string
  user: string
  inputContentData: string
  materialContentData: Array<any>
}

const props = withDefaults(defineProps<Props>(),{
  reKey: '',
  user: '张三',
  inputContentData: '',
  materialContentData: () => []
})

const config = reactive<ConfigType>({
  tabs: [
    {
      type: '1',
      icon: "/static/file/pic.png",
      name: '图片',
      comName: shallowRef(PhonePicture)
    },
    {
      type: '2',
      icon: "/static/file/mov.png",
      name: '视频',
      comName: shallowRef(PhoneVideo)
    },
    {
      type: '3',
      icon: "/static/file/link.png",
      name: '链接',
      comName: shallowRef(PhoneLink)
    },
    {
      type: '4',
      icon: "/static/file/mp3.png",
      name: '音频',
      comName: shallowRef(PhoneAudio)
    },
    {
      type: '6',
      icon: "/static/file/wbgg.png",
      name: '抽奖',
      comName: shallowRef(PhoneAward)
    },
    {
      type: '7',
      icon: "/static/file/shop.png",
      name: '商品素材',
      comName: shallowRef(PhoneGoods)
    },
    {
      type: '8',
      icon: "/static/file/shop.png",
      name: '页面素材',
      comName: shallowRef(PhonePage)
    },
    {
      type: '9',
      icon: "/static/file/form.png",
      name: '收集表',
      comName: shallowRef(PhoneCollection)
    },
    {
      type: '11',
      icon: "/static/file/miniApp.png",
      name: '小程序',
      comName: shallowRef(PhoneMiniPrograme)
    }
  ],
})

// const previewList = computed(()=>{
//   if(content.value){
//     const content_ = {
//       type: '0',
//       icon: "/static/file/pic.png",
//       name: content.value,
//     }
//     return [content_, ...materials.value]
//   }else{
//     return materials.value
//   }
// })

const getCom = (item:any) => {
  return config.tabs.find(ite => ite.type === item[0].type)?.comName
}

const updateMaterials = (material:any):void => {
  materials.value = material
}

const updateContent = (val:any):void => {
  content.value = val
}

watchEffect(()=>{
  content.value = props.inputContentData
  materials.value = props.materialContentData
})

onMounted(()=>{
  bus.on('selectFriendMaterials', updateMaterials)
  bus.on('changeFrienfContent', updateContent)
})

onUnmounted(() => {
  bus.off('selectFriendMaterials', updateMaterials)
  bus.off('changeFrienfContent', updateContent)
})

</script>
<style lang="scss" scoped>
  .preview-list{
    // background-color: pink;
    .preview-item{
      width: 92%;
      margin: 4px auto 12px;
      .user-title{
        display: flex;
        align-items: center;
        img{
          width: 24px;
          height: 24px;
        }
        span{
          margin-left: 6px;
          font-size: 12px;
          color: #bbb;
        }
      }
      .content{
        width: 100%;
        padding-left: 30px;
        box-sizing: border-box;
        font-size: 12px;
        color: #333;
        line-height: 1.4;
        font-weight: 300;
        margin-bottom: 4px;
        white-space: pre-line;
      }
      .materials{
        width: 100%;
        padding-left: 30px;
        box-sizing: border-box;
      }
    }
  }
</style>
